<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏弹出效果</title>
		<script src="../"></script>
		<style>
			/* 结合实际html结构--通配【合理】 */
			*{
				font: 16px "微软雅黑";
				margin: 0px;
				padding: 0px;
				/* 无序列表：有样式---“去一个样式：列表项” */
				text-decoration: none;
				/* 无序列表：有样式---
				去全部样式：list-style-type  去列表项样式
						   list-style-position  去列表项标记位置样式
						   list-style-image  去列表项图片标记样式
				 
				 */
				list-style: none;
			}
			/**左栏效果
			 * 1.左栏空间区域 235*450 背景颜色
			 * 2.左栏区域内容【li】  加权235*50相对定位--挂靠点【固定位置】
			 * 3.给每个区域内容【li】加鼠标移动上去改背景颜色
			 * 4.左栏弹出框： 400*450 一个像素边框 绝对定位-微调
			 */
			aside{
				width: 265px;
				height: 530px;
				background: #d9d9d9;
				margin: 20px 50px;
			}
			aside ul.sidebar li{
				width: 235px;
				height: 50px;
				/* 相对定位--挂靠点 */
				position: relative;
				float: left;
				line-height: 50px;
				top: 15px;
				padding-left: 30px;
			}
			aside ul.sidebar li:hover{
				background: #f7f8fc;
				display: block;
			}
			aside ul.sidebar div.out{
				width: 400px;
				height: 530px;
				border: 1px solid red;
				/* 挂靠位:绝对定位:按照相对定位基点开始定位 */
				position: absolute;
				left: 285px;
				/* 显示与隐藏 JavaScript【Jquery框架】 */
				display: block;
			}
			aside ul.sidebar li span{
				border: 1px solid red;
				float: right;
				/* 间隙 内边框 */
				padding-right: 50px;
				line-height: 50px;
			}
		</style>
		<script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- html结构，结构化标记【语义化标签】 aside元素 针对：左栏，广告，弹出效果。。。。有利于SEO优化
				 之前版本通过div+id起别名方式【缺点：繁琐，定义起名，冗余】
				 -->
	 <aside>
		 <ul class="sidebar">
			<!-- 弹出框 -->
			<div class="out"></div>
			<li>手机 平板 电话卡<span>></span></li>
		 	<li>电视 盒子<span>></span></li>
		 	<li>路由器 智能硬件<span>></span></li>
		 	<li>移动电源 插线板<span>></span></li>
		 	<li>耳机 音箱<span>></span></li>
		 	<li>电池 存储卡<span>></span></li>
		 	<li>保护套 后盖<span>></span></li>
		 	<li>贴膜 其他配件<span>></span></li>
		 	<li>米兔 服装<span>></span></li>
			<li>箱包 其他周边<span>></span></li>
		 </ul>
		 
	</aside>
		<script>
			// 左栏弹出与隐藏.hover事件源+css函数
			//选择器:li
			$("aside ul.sidebar li").hover(function(){
				/*弹出框默认:隐藏---hover悬停第一件事:显示*/
				$("aside ul.sidebar div.out").css("display","block");
			},function(){
				$("aside ul.sidebar div.out").css("display","none");
			});
		</script>
	</body>
</html>

<!-- 事件源  .hover()    切换效果与css选停hover一致
						语法：.hover(function(){}，function(){})-->
